<template>
  <h1>App</h1>
  <ul>
    <!-- 
      路由跳转两种方式：
        1. 路由链接跳转
          <router-link to="/xxx">xxx</router-link>
        2. 编程式导航
          push/replace/go/back
     -->
    <li><router-link to="/home">Home</router-link></li>
    <li><a @click="goAbout">About</a></li>
  </ul>
  <!-- 加载显示路由组件 -->
  <router-view>
    <!-- 
      通过作用域插槽，可以得到要渲染的路由组件：Component
      是由router-view传递过来的要渲染的路由组件
     -->
    <!-- 
      component是vue内置元素，本身是不会渲染任何内容
      元素属性is来决定渲染的内容
     -->
    <template v-slot="{ Component }">
      <!-- transition包裹的组件，必须有一个根标签 -->
      <transition name="fade">
        <keep-alive>
          <component :is="Component"></component>
        </keep-alive>
      </transition>
    </template>
  </router-view>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script lang="ts" setup>
import { useRouter } from "vue-router";

// router就是过去我们在vue2中使用的$router，用来编程式导航
const router = useRouter();

const goAbout = () => {
  router.push({
    name: "About",
    query: {
      age: 18,
    },
  });

  // router.push({
  //   path: "/about",
  //   query: {
  //     age: 18,
  //   },
  // });

  // router.push("/about?age=18");
};
</script>

<style>
/* 从隐藏到显示 */
.fade-enter-from {
  opacity: 0;
  transform: translateX(-50px);
}
.fade-enter-active {
  /* transition: 1s all; */
  transition: 1s opacity, 1s transform;
}
.fade-enter-to {
  opacity: 1;
  transform: translateX(0);
}

/* 从显示到隐藏 */
/* .fade-leave-from {
  opacity: 1;
  transform: translateX(0);
}
.fade-leave-active {
  transition: 1s opacity, 1s transform;
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(-50px);
} */
</style>
